<template>
  <a-row type="flex">
    <a-col :flex="18">
      <div class="tables" :class="{ bordered: backgroundInfo.raw.cbgValue || isPricing }">
        <e-title title="Client Info" />
        <div class="table">
          <a-row>
            <a-col :span="4" class="cell field">Phase Progress</a-col>
            <a-col :span="8" class="cell value">Phase {{ apply.raw.value.clientInfo.clientPhase }}</a-col>
            <a-col :span="4" class="cell field">Client Name</a-col>
            <a-col :span="8" class="cell value">{{ apply.raw.value.clientInfo.fullName }}</a-col>
          </a-row>
          <a-row>
            <a-col :span="4" class="cell field">Business Area</a-col>
            <a-col :span="8" class="cell value">{{ apply.transformed.value.clientInfo.businessDirection }}</a-col>
            <a-col :span="4" class="cell field">Country/Region</a-col>
            <a-col :span="8" class="cell value">{{ apply.transformed.value.clientInfo.countryID }}</a-col>
          </a-row>
          <a-row>
            <a-col :span="4" class="cell field">Competitors Information</a-col>
            <a-col :span="8" class="cell value">{{ backgroundInfo.transformed.cbg.rivalID }}</a-col>
            <a-col :span="4" class="cell field">Competitors Type</a-col>
            <a-col :span="8" class="cell value">{{ backgroundInfo.transformed.cbg.rivalLevelID }}</a-col>
          </a-row>
          <a-row>
            <a-col :span="4" class="cell field">Client Value</a-col>
            <a-col :span="8" class="cell value">{{ backgroundInfo.transformed.cbg.valueID }}</a-col>
            <a-col :span="4" class="cell field">Currency</a-col>
            <a-col :span="8" class="cell value">{{ apply.transformed.value.clientInfo.currencyID }}</a-col>
          </a-row>
          <a-row>
            <a-col :span="4" class="cell field">Language Pairs</a-col>
            <a-col :span="20" class="cell value" style="width: 0; line-height: 32px">
              <a-tag v-for="langPair in apply.raw.value.langPair" :key="langPair.langPairID">
                {{ langPair.sLangName }} -> {{ langPair.tLangName }}
              </a-tag>
            </a-col>
          </a-row>
          <!--
          <a-row>
            <a-col :span="4" class="cell field">BUM</a-col>
            <a-col :span="20" class="cell value">
              {{ apply.raw.value.bumid }}
            </a-col>
          </a-row>
          -->
        </div>
        <div
          v-if="Array.isArray(backgroundInfo.raw.cbgDemandType) && backgroundInfo.raw.cbgDemandType.length > 0"
          class="demands-label">
          Project Information
        </div>
        <div v-for="(demandType, index) in backgroundInfo.transformed.cbgDemandType" :key="index" class="demands">
          <div class="table">
            <a-row>
              <a-col :span="4" class="cell field">Project Type</a-col>
              <a-col :span="20" class="cell value">{{ demandType.demandTypeID }}</a-col>
            </a-row>
            <a-row>
              <a-col :span="4" class="cell field">Project Content</a-col>
              <a-col :span="20" class="cell value">
                <a-space>
                  <span v-for="(demandContent, subIndex) in demandType.demandContentID" :key="subIndex">
                    {{ demandContent }}
                  </span>
                </a-space>
              </a-col>
            </a-row>
            <a-row>
              <a-col :span="4" class="cell field">Expected Turnover</a-col>
              <a-col :span="8" class="cell value">{{ demandType.proPOID }}</a-col>
              <a-col :span="4" class="cell field">Current Pain Point</a-col>
              <a-col :span="8" class="cell value">{{ demandType.notGoodID }}</a-col>
            </a-row>
            <a-row>
              <a-col :span="4" class="cell field">Internal Localization Process</a-col>
              <a-col :span="20" class="cell value">{{ demandType.processID }}</a-col>
            </a-row>
            <a-row>
              <a-col :span="4" class="cell field">Contact Tool</a-col>
              <a-col :span="8" class="cell value">{{ demandType.talkChannelID }}</a-col>
              <a-col :span="4" class="cell field">Contact Person</a-col>
              <a-col :span="8" class="cell value">{{ demandType.talkModeID }}</a-col>
            </a-row>
            <a-row>
              <a-col :span="4" class="cell field">Procurement Process</a-col>
              <a-col :span="8" class="cell value">{{ demandType.purchaseModeID }}</a-col>
              <a-col :span="4" class="cell field">Decision Maker and Role</a-col>
              <a-col :span="8" class="cell value">
                {{ backgroundInfo.raw.cbgDemandType[index].decisionRoles }}
              </a-col>
            </a-row>
            <a-row>
              <a-col :span="4" class="cell field">Platform Requirement</a-col>
              <a-col :span="8" class="cell value">{{ demandType.platformID }}</a-col>
              <a-col :span="4" class="cell field">Client Review Process</a-col>
              <a-col :span="8" class="cell value">
                {{ demandType.aboutReviewID }}
              </a-col>
            </a-row>
            <a-row>
              <a-col :span="4" class="cell field">Use of Localization (Quality Expectation)</a-col>
              <a-col :span="20" class="cell value">{{ demandType.useTranslationID }}</a-col>
            </a-row>
            <a-row>
              <a-col :span="4" class="cell field">Recommendations on Pricing Strategy</a-col>
              <a-col :span="20" class="cell value">
                {{ backgroundInfo.raw.cbgDemandType[index].suggestedQuote }}
              </a-col>
            </a-row>
            <a-row>
              <a-col :span="4" class="cell field">Pricing Strategy</a-col>
              <a-col :span="20" class="cell value">{{ demandType.strategy }}</a-col>
            </a-row>
          </div>
          <a-divider dashed />
        </div>
      </div>
    </a-col>
    <a-col v-if="backgroundInfo.raw.cbgValue || isPricing" :flex="6">
      <a-space>
        <e-title title="Client Value" />
        <a-divider type="vertical" />
        <a-button v-if="isPricing" type="link" size="small" @click="handleSaveClientValueEvaluation">
          <a-space>
            <e-icon type="save" />
            Save
          </a-space>
        </a-button>
      </a-space>
      <div class="evaluation">
        <a-form layout="vertical">
          <a-form-item label="PM Difficulty">
            <e-rate :readonly="!isPricing" v-model="score.managementLevel" />
          </a-form-item>
          <!-- 有ClientTier则取其 -->
          <a-form-item label="PO Amount / Profit Margin">
            <e-rate
              v-model="poLevelComputed"
              :readonly="
                (apply.raw.value.clientInfo.clientTier > 0 && apply.raw.value.clientInfo.clientTier < 6) || !isPricing
              " />
          </a-form-item>
          <a-form-item label="Resourcing Difficulty">
            <e-rate :readonly="!isPricing" v-model="score.resourceLevel" />
          </a-form-item>
          <a-form-item label="Source File Difficulty">
            <e-rate :readonly="!isPricing" v-model="score.sourceLevel" />
          </a-form-item>
          <a-form-item label="QA Difficulty">
            <e-rate :readonly="!isPricing" v-model="score.checkLevel" />
          </a-form-item>
        </a-form>
        <a-divider dashed />
      </div>
    </a-col>
  </a-row>
</template>
<script setup>
import { ref, reactive, watch, inject, computed } from 'vue'
import ETitle from '@/components/ETitle.vue'
import EIcon from '@/components/EIcon.vue'
import ERate from '@/components/ERate.vue'
import ServicePrice from '@/api/client/servicePrice.js'
import { CHECK_FORM_INTEGRITY, SAVED_SUCCESSFULLY } from '@/constants/message.js'
const { message } = inject('Feedback')
const { isPricing } = inject('permissions')
const props = defineProps({
  backgroundInfo: {
    type: Object,
    default() {
      return {
        raw: {
          cbgDemandType: [],
          cbg: {},
          cbgValue: {}
        },
        transformed: {
          cbgDemandType: [],
          cbg: {}
        }
      }
    }
  },
  apply: {
    type: Object,
    default() {
      return {
        raw: ref({
          clientInfo: {}
        }),
        transformed: ref({
          clientInfo: {}
        })
      }
    }
  },
  readonly: {
    type: Boolean,
    default: false
  }
})
const score = reactive({
  managementLevel: 0,
  poLevel: 0,
  resourceLevel: 0,
  sourceLevel: 0,
  checkLevel: 0
})
const loadScore = () => {
  if (props.backgroundInfo.raw.cbgValue) {
    Object.keys(score).forEach(key => {
      score[key] = props.backgroundInfo.raw.cbgValue[key]
    })
  }
}
loadScore()
watch(
  () => props.backgroundInfo.raw.cbgValue,
  () => {
    loadScore()
  }
)
const poLevelComputed = computed({
  get() {
    if (props.apply.raw.value.clientInfo.clientTier > 0 && props.apply.raw.value.clientInfo.clientTier < 6) {
      // eslint-disable-next-line vue/no-side-effects-in-computed-properties
      score.poLevel = props.apply.raw.value.clientInfo.clientTier
    }
    return score.poLevel
  },
  set(val) {
    if (props.apply.raw.value.clientInfo.clientTier === 0 || props.apply.raw.value.clientInfo.clientTier === 6) {
      score.poLevel = val
    }
  }
})
const handleSaveClientValueEvaluation = () => {
  let formCompleted = true
  Object.keys(score).forEach(key => {
    if (score[key] === 0) formCompleted = false
  })
  if (formCompleted) {
    ServicePrice.saveClientQuoteApplyValue(props.apply.raw.value.client, props.apply.raw.value.id, score).then(() => {
      message.success(SAVED_SUCCESSFULLY)
    })
  } else {
    message.error(CHECK_FORM_INTEGRITY)
  }
}
</script>
<style lang="less" scoped>
@border: 1px solid @lighter-gray;
.tables {
  &.bordered {
    padding: 0 48px 0 0;
    border-right: 1px dashed #e1e6f0;
    margin-right: 48px;
  }
  .table {
    border: @border;
    margin-top: 24px;
    .cell {
      padding: 10px 14px;
      border-bottom: @border;
      border-right: @border;
      &:last-child {
        border-right: none;
      }
      &.field {
        background-color: @milk;
        color: @text-gray;
      }
    }
    .ant-row:last-child {
      .cell {
        border-bottom: none;
      }
    }
  }
  .demands-label {
    color: @text-gray;
    padding: 24px 0 10px 0;
  }
  .demands {
    .table:nth-child(1) {
      margin-top: 0;
    }
  }
}
.evaluation {
  width: 70%;
  margin-top: 24px;
}
</style>
